<template>
	<view class="fui-wrap">
		<swiper class="fui-banner__wrap" circular @change="changeSwiper" :current="current" :indicator-dots="false" :autoplay="false" :interval="4000" :duration="150">
			<swiper-item>
				<view :class="(detail && detail.entry_photo.endsWith('nopic.jpg'))?'nopic':'havapic'">
					<image :src="detail.entry_photo" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view :class="(detail && detail.exit_photo.endsWith('nopic.jpg'))?'nopic':'havapic'">
					<image :src="detail.exit_photo" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="tag-box">
			<fui-data-tag :padding="['10rpx','24rpx']" :width="150" activeColor="#13a1ff" borderColor="#13a1ff" mark markColor="#13a1ff" :options="['入场照片','离场照片']" @change="changePhoto" :modelValue="photo[current]"></fui-data-tag>
		</view>
		<view class="info" v-if="detail">
			<fui-section :padding="['20rpx','0rpx']" title="入场信息" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text text="车牌号：" color="#afafaf" :size="28"></fui-text>
					<platetype :plate_number="detail.plate_number" :plate_type="detail.plate_type" :size="28"></platetype>
					<fui-text @click="edit('plate_number')" :padding="['0','0','0','50rpx']" text="修改" color="#13a1ff" :size="28" decoration="underline" v-if="detail.status===0 || detail.status===6"></fui-text>
				</view>
				<view class="line">
					<fui-text text="入场时间：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.entry_time_txt" color="#000" :size="28"></fui-text>
					<fui-text @click="edit('entry_time')" :padding="['0','0','0','50rpx']" text="修改" color="#13a1ff" :size="28" decoration="underline" v-if="detail.status===0 || detail.status===6"></fui-text>
				</view>
				<view class="line">
					<fui-text text="入场通道：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.entry_barrier" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="入场方式：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.entry_type_txt" color="#000" :size="28"></fui-text>
				</view>
			</view>
			<fui-section :padding="['20rpx','0rpx']" title="出场信息" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text text="停车状态：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.status_txt" :color="statusColor[detail.status]" :size="28"></fui-text>
				</view>
				<block v-if="detail.status==3 || detail.status==4 || detail.status==5 || detail.status==7">
				<view class="line">
					<fui-text text="出场时间：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.exit_time_txt" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="出场通道：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.exit_barrier" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="出场方式：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.exit_type_txt" color="#000" :size="28"></fui-text>
				</view>
				</block>
			</view>
			<fui-section :padding="['20rpx','0rpx']" title="费用信息" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text text="费用合计：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(detail.total_fee)" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="实际支付费用：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(detail.pay_fee)" color="#000" :size="28"></fui-text>
				</view>
			</view>
			<block v-if="detail.coupon">
			<fui-section :padding="['20rpx','0rpx']" title="停车券" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text text="使用停车券：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.coupon" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="优惠金额：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(detail.activities_fee)" color="#000" :size="28"></fui-text>
				</view>
			</view>
			</block>
			<block v-if="detail.remark">
			<fui-section :padding="['20rpx','0rpx']" title="出入备注" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text :text="detail.remark" color="#000" :size="28"></fui-text>
				</view>
			</view>
			</block>
		</view>
		<fui-date-picker v-if="checkTime.value" :show="checkTime.show" type="5" :value="checkTime.value"  @change="changeTime" @cancel="cancelTime"></fui-date-picker>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {formatDuration,parseNumber} from '@/utils/util.js'
	import platetype from '@/components/common/platetype.vue';
	export default {
		components:{
			platetype:platetype,
		},
		data() {
			return {
				statusColor:{'0':'#000','1':'#000','2':'red','3':'green','4':'green','5':'#ffdd60','6':'#ffdd60','7':'red'},
				current: 0,
				photo:['入场照片','离场照片'],
				checkTime:{
					show:false,
					value:''
				},
				detail:''
			}
		},
		onLoad(e) {
			this.getDetail(e.records_id);
		},
		onShow() {
			let plate_number=uni.getStorageSync('plate_number') || '';
			if(plate_number){
				uni.setStorageSync('plate_number','');
				this.$post('parking/records/edit',{id:this.detail.id,type:'plate_number',value:plate_number},true,true).then(res=>{
					this.detail.plate_number=plate_number;
				});
			}
		},
		methods: {
			...methods,
			formatDuration,
			parseNumber,
			change(e) {
				this.current = e.detail.current;
			},
			changeSwiper:function(e){
				this.current=e.detail.current;
			},
			changePhoto:function(e){
				this.current=e.detail.index;
			},
			getDetail:function(records_id){
				this.$get('parking/records/detail',{id:records_id},true).then(res=>{
					this.detail=res;
					this.checkTime.value=this.detail.entry_time_txt;
				});
			},
			edit:function(type){
				if(type=='entry_time'){
					this.checkTime.show=true;
				}
				if(type=='plate_number'){
					this.$navigateTo('parking/plate?type=input&plate_number='+this.detail.plate_number);
				}
			},
			changeTime:function(e){
				this.$post('parking/records/edit',{id:this.detail.id,type:'entry_time',value:e.result},true,true).then(res=>{
					this.detail.entry_time_txt=e.result;
					this.cancelTime();
				});
			},
			cancelTime:function(){
				this.checkTime.value='';
				this.checkTime.show=false;
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap{
	
}
.fui-banner__wrap{
	height: 400rpx;
	padding: 20rpx;
	background-color: #e3e3e3;
	.havapic{
		image{
			height: 400rpx;
			width: 100%;
		}
	}
	.nopic{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		background-color: #fff;
		image{
			height: 200rpx;
			width: 200rpx;
		}
	}
}
.tag-box{
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
}
.info{
	padding:0 20rpx;
	.line-box{
		background-color: #fff;
		padding: 20rpx 0rpx;
		margin-bottom: 20rpx;
		.line{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 70rpx;
		}
	}
}
</style>